import React, { Component, Fragment } from "react";
import { Button, Switch, message } from "antd";
import { DeleteList, Status } from "../../api/department";
import { Link } from "react-router-dom";
//导入table组件
import TableComponet from "../../components/tableData/Index";
export default class DepartmentList extends Component {
  state = {
    //请求参数
    pageNumber: 1,
    pageSize: 10,
    keyWord: "",
    //复选框数据
    selectRowKeys: [],
    //弹出框
    visible: false,
    //id
    id: "",
    //弹窗确定按钮
    confirmLoading: false,
    //表头
    flage: false,

    TableConfig: {
      url: "department",
      checkbox: true,
      rowKey: "id",
      thead: [
        {
          title: "部门名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "禁启用",
          dataIndex: "status",
          key: "status",
          render: (text, rowData) => {
            return (
              <Switch
                loading={rowData.id === this.state.id}
                onChange={() => this.onHeaderSwitch(rowData)}
                checkedChildren="启用"
                unCheckedChildren="禁用"
                defaultChecked={rowData.status}
              />
            );
          },
        },
        {
          title: "人员数量",
          dataIndex: "number",
          key: "number",
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          width: 225,
          render: (text, rowData) => {
            return (
              <div className="inline-button">
                <Button type="primary" onClick={() => {}}>
                  <Link
                    to={{
                      pathname: "/index/department/add",
                      state: { id: rowData.id },
                    }}
                  >
                    编辑
                  </Link>
                </Button>

                <Button
                  type="primary"
                  onClick={() => this.delHeader(rowData.id)}
                >
                  删除
                </Button>
              </div>
            );
          },
        },
      ],
    },
    data: [],
  };
  //获取子组件实例
  getChildRef = (ref) => {
    this.TableComponet = ref; //存储紫钻
  };
  //禁启用
  onHeaderSwitch(data) {
    if (!data.status) {
      return false;
    }
    if (this.state.flage) {
      return false;
    }
    const responseData = {
      id: data.id,
      status: data.status === true ? false : true,
    };
    this.setState({ flage: true });
    Status(responseData)
      .then((response) => {
        message.info(response.data.message);
        this.setState({ flage: false });
      })
      .catch((error) => {
        this.setState({ flage: false });
      });
  }
  //复选框
  onChecked = (selectRowKeys) => {
    this.setState({ selectRowKeys });
  };
  //弹窗
  modalToken = () => {
    this.setState({
      confirmLoading: true,
    });
    DeleteList({ id: this.state.id }).then((response) => {
      message.info(response.data.message);
      this.setState({
        visible: false,
        id: "",
        confirmLoading: false,
        selectRowKeys: [],
      });
    });
  };
  //删除
  delete = (id) => {
    this.TableComponet.onHandlerDelete(id);
  };
  render() {
    return (
      <Fragment>
        <TableComponet
          config={this.state.TableConfig}
          onRef={this.getChildRef}
        ></TableComponet>
      </Fragment>
    );
  }
}
